<template>
    <div>
        <div class="code-content settle-sub-box">
            <div class="banner">
            </div>
            <div class="box">
                <div class="code-cont">
                    <div class="info">
                        <el-avatar class="avatar" fit="cover"
                                   :src="detail.headPortrait ? '/_api' + detail.headPortrait : ''"
                                   @error="errorHandler">
                            <img src="/static/images/avatar.png"/>
                        </el-avatar>
                        <div class="name">{{detail.name}}</div>
                    </div>
                    <div class="code">
                        <el-image :src="detail.qrAddress ? '/_api' + detail.qrAddress : ''" :fit="'cover'">
                            <div slot="placeholder" class="image-slot">
                                <i class="el-icon-loading"></i>
                            </div>
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                    <div class="footer">
                        <div v-if="detail&&detail.identity">
                            <div class="state">健康通行</div>
                            <div>出入住院部，请主动出示</div>
                        </div>
                        <div v-if="detail&&!detail.identity">
                            <div class="state error">身份未选择，暂无法通行</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                detail: {},
                qrcodePath: '',
                avatarPath: ''
            }
        },
        mounted() {
            this.$emit('footerHide')
            this.init()
        },
        methods: {
            init() {
                this.$http.get('/qrcode/getQrcodeData').then(result => {
                    if (result.success && result.data) {
                        this.detail = result.data
                    }
                })
            },
            errorHandler() {
                return true
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .code-content {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #fff;

        .banner {
            height: 3rem;
            background-color: #598CDA;
            font-size: .4rem;
            font-weight: bolder;
            color: #fff;
            /*padding: .3rem;*/
            letter-spacing: .1rem;
            text-align: center;

            .name {
                line-height: 1.2rem;
            }
        }

        .box {
            filter: drop-shadow(0 0 .04rem rgba(0, 0, 0, .1));
        }

        .code-cont {
            border-radius: 3px;
            margin: -1.5rem .8rem .5rem;
            // box-shadow: 0 0 6px -1px #999;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            background: -webkit-radial-gradient(.3rem at left 2.5rem, transparent 50%, #fff 0) top left / 60% 100% no-repeat,
            -webkit-radial-gradient(.3rem at right 2.5rem, transparent 50%, #fff 0) top right / 60% 100% no-repeat;
            background: -o-radial-gradient(.3rem at left 2.5rem, transparent 50%, #fff 0) top left / 60% 100% no-repeat,
            -o-radial-gradient(.3rem at right 2.5rem, transparent 50%, #fff 0) top right / 60% 100% no-repeat;
            background: -moz-radial-gradient(.3rem at left 2.5rem, transparent 50%, #fff 0) top left / 60% 100% no-repeat,
            -moz-radial-gradient(.3rem at right 2.5rem, transparent 50%, #fff 0) top right / 60% 100% no-repeat;
            background: radial-gradient(.3rem at left 2.5rem, transparent 50%, #fff 0) top left / 60% 100% no-repeat,
            radial-gradient(.3rem at right 2.5rem, transparent 50%, #fff 0) top right / 60% 100% no-repeat;

            > div {
                padding: .4rem;
            }

            /deep/ .code {
                .el-image {
                    display: block;
                    width: 54vw !important;
                    height: 54vw !important;
                    margin: 0 auto;
                }
            }

            .footer {
                text-align: center;
                color: #999;
                padding-top: 0;
            }

            .state {
                color: #39C0E0;
                font-size: .32rem;
                line-height: .56rem;

                &.error {
                    color: #DA6959;
                }
            }

            .info {
                text-align: center;
                border-bottom: 2px dashed #ddd;
                position: relative;
                height: 2.5rem;
                padding: 0;
                margin: 0 .3rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .avatar {
                    width: 1.2rem;
                    height: 1.2rem;
                    line-height: 1rem;
                    font-size: .28rem;
                    box-shadow: 0 0 6px -1px rgba(0, 0, 0, .1);
                }

                .name {
                    margin-top: .15rem;
                    font-size: .32rem;
                }
            }
        }

        .appointmentTime {
            margin: .3rem;
            font-size: .32rem;

            span {
                color: #7b7b7b;
            }
        }
    }
</style>
